<!DOCTYPE html>
<html>
	<head>
		<!--字符集，编码-->
		<meta http-equiv="content-type" content="text/html" charset="UTF-8">
		<!--Edge模式告诉IE以最高级模式渲染文档-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<!--viewport就是设备的屏幕上用来显示我们网页的那一块区域-->
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

	<!--删除默认的苹果工具栏和菜单栏-->
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!--控制状态栏显示样式-->
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<!--格式检测-->
		<meta name="format-detection" content="telephone=no" />
		<!--???-->
		<meta name="referrer" content="never" />
		<title>亲友圈测试</title>
		<script src="http://cdn.amazeui.org/jquery/2.1.4/jquery.min.js"></script>
		<script src="http://qzonestyle.gtimg.cn/open/mobile/light_app/js/device.js"></script>
		<style>
			.button {
				background-color: #660066;
			}
			
			.trstyle {
				background-color: red;
			}
			
			.tdstyle {
				background-color: gray;
			}
			
			.tablestyle {
				max-width: 720px;
				background-color: #006666;
			}
			
			.box {
				display: flex;
				justify-content: center;
				align-items: center;
			}
		</style>

		<script type="application/javascript">
			$(document).ready(function() {
				device.debug = true;
				device.log('文档加载完成', 'yellow');
			});
		</script>
	</head>

	<body style="margin: 0px; padding: 0px;">
		<div style="width: 100%;height: 100%;">
			<div id="bannerId" class="banner">
				<img id="img1" src="http://fs.skysrt.com/videochat/img/banner_720.jpg" alt="" style="max-width: 100%;" />
			</div>

			<div id="area-btn" class="button" style="text-align:center;margin: 0; padding: 0;visibility: hidden;">
				<table id="area-table" class="tablestyle" align="center" cellpadding="10">
					<tr class="trstyle">
						<td class="tdstyle"><img src="http://fs.skysrt.com/videochat/img/startvideochat.png" onclick="startVideoChat();" style="max-width: 80%;" />
							<br/>
							<span>通话</span></td>
						<td class="tdstyle"><img src="http://fs.skysrt.com/videochat/img/startvideomessage_2.png" onclick="startVideoMessage();" style="max-width: 80%;" />
							<br/>
							<span>拍视频</span></td>
					</tr>
					<tr class="trstyle">
						<td class="tdstyle"><img src="http://fs.skysrt.com/videochat/img/sendpicture.png" onclick="sendPicture();" style="max-width: 80%;" />
							<br/>
							<span>照片</span></td>
						<td class="tdstyle"><img src="http://fs.skysrt.com/videochat/img/takepicture.png" onclick="takePicture();" style="max-width: 80%;" />
							<br/>
							<span>拍照片</span></td>
					</tr>
				</table>
			</div>

			<div id="bottomId" class="box" class="bottom" style="position:fixed; bottom:0; text-align: center; vertical-align: middle; width:100%; height: 100px;background: #eeeeee;">
				<img class="item" src="img/push.png" alt="" />
				<div class="item" style="margin-left: 15px;">影视推送</div>
			</div>
		</div>
		
		<script type="application/javascript">
			img1.onload = function() {
				device.debug = true;
				device.log('发送开始', 'yellow');
				var bannerH = document.getElementById("bannerId").clientHeight;
				var screenW = window.screen.width;
				var screenH = window.screen.height;
				var bottomH = document.getElementById("bottomId").clientHeight;
				
				var restH = screenH - bannerH - bottomH;
				var radio = 1;
				if(restH >= 50) {
					if(restH > screenW) {
						radio = 1;
					} else {
						radio = (restH - 20)/screenW;
					}
					var targetW = screenW * radio; 
					document.getElementById("area-table").style.width = targetW + "px";
					document.getElementById("area-btn").style.visibility = "visible";
				} else {
					document.getElementById("area-btn").style.visibility = "visible";
				}
				device.log(screenW);
				device.log(screenH);
				device.log(bannerH);
				device.log(bottomH);
				device.log(restH);
				device.log(radio);
				device.log(targetW);
//				alert("screenW:" + screenW + "screenH:" + screenH + "bannerH:" + bannerH +　"bottomH:" + bottomH + "restH:" + restH);
			}
		</script>
	</body>

</html>